<template>
  <div class="big-screen">
    <div class="head">
      <div class="left"></div>
      <div class="mid">
        <p>天津武警总队智慧图书馆大数据平台</p>
        <!-- <p class="line"></p> -->
      </div>
      <div class="right"></div>
    </div>
    <div class="main">
      <div class="left">
        <div class="top">
          <img class="common-line" src="../assets/line.png">
          <p class="title">书籍借阅画像</p>
          <div style="width:100%;height:28.25rem" ref="portraitChart"></div>
        </div>
        <div class="bottom">
          <img class="common-line" src="../assets/line.png">
          <p class="title">今日数据概况</p>
          <ul class="today-book-top">
            <li>
              <p class="number1">23456</p>
              <p>No.1心理学</p>
              <div class="circle"></div>
            </li>
            <li>
              <p class="number1">12345</p>
              <p>No.2青春校园</p>
              <div class="circle"></div>
            </li>
            <li>
              <p class="number1">6789</p>
              <p>No.3军事教育</p>
              <div class="circle"></div>
            </li>
          </ul>
          <ul class="common-statistics">
            <li>
              <p class="number1">3290</p>
              <p>当日到访人数</p>
            </li>
            <li>
              <p class="number1">355</p>
              <p>今日推广量</p>
            </li>
            <li>
              <p class="number1">788</p>
              <p>今日借阅量</p>
            </li>
            <li>
              <p class="number1">455</p>
              <p>今日到馆量</p>
            </li>
          </ul>
          <div class="title-small">今日到馆中队Top5</div>
          <div style="width:100%;height:5rem" ref="todayChart"></div>
        </div>
      </div>
      <div class="mid">
        <div class="top">
          <img class="common-line" style="width:307px;height:0.625rem;" src="../assets/line.png">
          <p class="title">实时在馆总人数</p>
          <div class="real-time">
            <p class="clock"></p>
            <p class="people">
              <ul>
                <li>0</li>
                <li>0</li>
                <li>0</li>
                <li>3</li>
                <li>7</li>
                <li>8</li>
                <li>0</li>
              </ul>
            </p>
            <p class="clock"></p>
          </div>
          <ul class="common-statistics">
            <li>
              <p class="number1">5500</p>
              <p>日活跃用户</p>
            </li>
            <li>
              <p class="number1">45500</p>
              <p>月活跃用户</p>
            </li>
            <li class="number2">
              <p><span>123.45</span>万</p>
              <p>用户总数</p>
            </li>
            <li>
              <p class="number1">2190</p>
              <p>本月用户借阅</p>
            </li>
            <li>
              <p class="number1">29</p>
              <p>本月中队借阅</p>
            </li>
          </ul>
          <ul class="common-statistics">
            <li>
              <p class="number1">5500</p>
              <p>日借阅<br/>使用量</p>
            </li>
            <li>
              <p class="number1">45500</p>
              <p>月借阅<br/>使用量</p>
            </li>
            <li class="number2">
              <p><span>73.45</span>万</p>
              <p>借阅总数</p>
            </li>
            <li>
              <p class="number1">2190</p>
              <p>本月借阅<br/>使用量</p>
            </li>
            <li>
              <p class="number1">29</p>
              <p>中队新增借阅<br/>使用量</p>
            </li>
          </ul>
          <p class="line"></p>
        </div>
        <div class="bottom">
          <img class="common-line" style="width:307px;height:0.625rem;" src="../assets/line.png">
          <p class="title">近30天数据概况</p>
          <div class="ring-wrap">
            <div class="ring-list ring-left">
              <ul>
                <li><span>4500</span>哲学的故事</li>
                <li><span>4200</span>文明之光</li>
                <li><span>345</span>全球通史</li>
                <li><span>3750</span>世界观</li>
                <li><span>3200</span>拥抱你内在的小孩</li>
              </ul>
            </div>
            <div ref="thirtyChart"></div>
            <div  class="ring-list ring-right">
              <ul>
                <li>伟大的孤独<span>4500</span></li>
                <li>为什么我们还没死掉<span>4200</span></li>
                <li>就说你和他们一样<span>345</span></li>
                <li>超高效时间管理<span>3750</span></li>
                <li>大话西方艺术史<span>3200</span></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        
        <div class="top">
          <img class="common-line" src="../assets/line.png">
          <p class="title">中队借阅排行Top10</p>
          <div style="width:100%;height:28.25rem" ref="topChart"></div>
        </div>
        <div class="bottom">
          <img class="common-line" src="../assets/line.png">
          <p class="title">近6个月借阅书籍概况</p>
          <div style="width:100%;height:21rem" ref="sixMonthChart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BigScreen',
  props: {
    msg: String
  },
  data(){
    return{
      portraitChart:null,
      todayChart:null,
      topChart:null,
      sixMonthChart:null,
      thirtyChart:null,
    }
  },
  mounted: function () {
    // this.axios.get('/api/getNewsList').then((response)=>{
    //     // this.newsList=response.data.data;
    //     alert(1)
    //   }).catch((response)=>{
    //     alert(2)
    //   })


    // rem等比适配配置文件
    // 基准大小
    const baseSize = 16
    // 设置 rem 函数
    // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
    let scale = document.documentElement.clientWidth / 1920
    // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
    console.log(getComputedStyle(window.document.documentElement)['font-size'])
    this.portraitChart = this.echarts.init(this.$refs.portraitChart)
    this.portraitChartLoad();//书籍借阅画像
    this.todayChart = this.echarts.init(this.$refs.todayChart)
    this.todayChartLoad();//今日到馆中队Top5
    this.topChart = this.echarts.init(this.$refs.topChart)
    this.topChartLoad();//中队借阅排行Top10
    this.sixMonthChart = this.echarts.init(this.$refs.sixMonthChart)
    this.sixMonthChartLoad();//近6个月借阅书籍概况
    this.thirtyChart = this.echarts.init(this.$refs.thirtyChart)
    this.thirtyChartLoad();//近30天数据概况

    window.onresize = () =>{
      scale = document.documentElement.clientWidth / 1920
      document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
      this.portraitChart.resize();
      this.todayChart.resize();
      this.topChart.resize();
      this.sixMonthChart.resize();
      this.thirtyChart.resize();
    }
  },
  methods: {
    portraitChartLoad(){
        let option = {
            tooltip: {
                axisPointer: {
                    type: "shadow",
                    textStyle: {
                        color: "#fff"
                    }
                },
            },
            grid: {
                top: 10,
                bottom: 80,
                left: 150,
                textStyle: {
                    color: "#fff"
                }
            },
            legend: {
                icon: 'rect',
                left: 20,
                bottom: 20,
                itemGap:30,
                itemWidth:10,
                itemHeight:10,
                textStyle: {
                    color: '#fff',
                    padding:[3, 0,0,0],
                    // backgroundColor:'red'
                },
                data: ['天津武警一中队', '天津武警三中队', '天津武警五中队']
            },
            calculable: true,
            xAxis: [{
                type: "value",
                trigger: "axis",
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.15)'
                    }
                },
                axisLabel: {
                    interval: 0,
                    fontSize:12,
                    color: 'rgba(255, 255, 255, 0.45)'
                },
            }],
            yAxis: [{
                type: "category",
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    fontSize:12,
                    color: '#fff'
                },
                splitArea: {
                    "show": false
                },
                data: ['小王子','月亮与六便士','长津湖','反脆弱','云边有个小卖部','社会契约论','箭术与禅心','反脆弱','沉思录','悉达多','人生的智慧', '叔本华思随笔', '大问题·简明哲学导论', '你的第一本哲学书', '万历十五年'],
            }],
            series: [{
                    name: "天津武警一中队",
                    type: "bar",
                    stack: "画像",
                    barMaxWidth: 12,
                    barGap: "10%",
                    itemStyle: {
                        normal: {
                            color: new this.echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                offset: 0,
                                color: '#03DFFC'
                            }, {
                                offset: 1,
                                color: '#1B63CC'
                            }])
                        }
                    },
                    data: [800, 900, 1300, 1500, 900,800,500,800,700,600,1200,800,1200,1000,1100],
                },
                {
                    name: "天津武警三中队",
                    type: "bar",
                    stack: "画像",
                    itemStyle: {
                        normal: {
                            color: new this.echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                offset: 0,
                                color: '#05A998'
                            }, {
                                offset: 1,
                                color: '#63FBFC'
                            }])
                        }
                    },
                    data: [800, 900, 1300, 1500, 900,800,500,800,700,600,1200,800,1200,1000,1100],
                },
                {
                    name: "天津武警五中队",
                    type: "bar",
                    stack: "画像",
                    itemStyle: {
                        normal: {
                            color: new this.echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                offset: 0,
                                color: '#2D5CBD'
                            }, {
                                offset: 1,
                                color: '#40A0FA'
                            }])
                        }
                    },
                    data: [800, 900, 1300, 1500, 900,800,500,800,700,600,1200,800,1200,1000,1100],
                }
            ]
        }
        // 绘制图表
        this.portraitChart.setOption(option);
    },
    todayChartLoad(){
        // 基于准备好的dom，初始化echarts实例
        let chartData=[788,562,389,320,190]
        let dataMax=chartData.reduce((a,b)=>{return a+b},0)
        let option = {
            grid: {
                top:0,
                bottom: 20,
                left: 0,
                right:0,
                textStyle: {
                    color: "#fff"
                }
            },
            legend: {
                icon: 'circle',
                left: 0,
                bottom: 0,
                itemGap:35,
                itemWidth:7,
                itemHeight:7,
                textStyle: {
                    color: '#fff',
                    padding:[3, 0,0,0],
                },
                data: ['一中队', '三中队', '五中队', '八中队', '九中队']
            },
            calculable: true,
            xAxis: [{
                type: "value",
                trigger: "axis",
                // min:dataMax,
                max:dataMax,
                splitNumber:1,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
            }],
            yAxis: [{
                type: "category",
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                data: [''],
            }],
            series: [{
                    name: "一中队",
                    type: "bar",
                    stack: "中队",
                    barMaxWidth: 26,
                    barGap: "10%",
                    itemStyle: {
                        normal: {
                            color: '#FA6400'
                        }
                    },
                    label: {
                        show: true,
                        position: 'inside',
                        color: '#000'
                    },
                    data: [chartData[0]],
                },
                {
                    name: "三中队",
                    type: "bar",
                    stack: "中队",
                    itemStyle: {
                        normal: {
                            color: '#FDB545'
                        }
                    },
                    label: {
                        show: true,
                        position: 'inside',
                        color: '#000'
                    },
                    data: [chartData[1]],
                },
                {
                    name: "五中队",
                    type: "bar",
                    stack: "中队",
                    itemStyle: {
                        normal: {
                            color: '#F9DB67'
                        }
                    },
                    label: {
                        show: true,
                        position: 'inside',
                        color: '#000'
                    },
                    data: [chartData[2]],
                },
                {
                    name: "八中队",
                    type: "bar",
                    stack: "中队",
                    itemStyle: {
                        normal: {
                            color: '#A3D98C'
                        }
                    },
                    label: {
                        show: true,
                        position: 'inside',
                        color: '#000'
                    },
                    data: [chartData[3]],
                },
                {
                    name: "九中队",
                    type: "bar",
                    stack: "中队",
                    itemStyle: {
                        normal: {
                            color: '#4DD7B2'
                        }
                    },
                    label: {
                        show: true,
                        position: 'inside',
                        color: '#000'
                    },
                    data: [chartData[4]],
                }
            ]
        }
        // 绘制图表
        this.todayChart.setOption(option);
    },
    topChartLoad(){
        // 基于准备好的dom，初始化echarts实例
        let XData = ["天津武警一中队","天津武警三中队","天津武警五中队","天津武警二中队","天津武警八中队","天津武警十中队","天津武警十一中队","天津武警四中队","天津武警六中队","天津武警七中队"]
        let valueData = [1000,800,780,690,600,550,500,450,400,390]
        let maxValueList=[]
        valueData.forEach((a)=>{maxValueList.push(valueData[0])})
        const pic0 = ""
        const pic1 = ""
        const pic2 = ""
        let option = {
            tooltip: {
              show:false,
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: "35%", //距离dom间距
              right: "15%",
              top: 0,
              bottom: "3%"
            },
            xAxis: [
              {
                type: "value",
                axisPointer: {
                  type: "shadow"
                },
                // 横坐标 分割线等取消显示
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                axisLabel: {
                  show: false
                }
              }
            ],
            yAxis: [
              {
                type: "category",
                inverse: true,
                axisLabel: {
                  // show: false,
                  // margin: 50,
                  fontSize: 12,
                  align: 'left',
                  color: '#fff',
                  padding: [0,0,0,-130],
                  interval: 0,
                  rich: {
                      a: {
                          color: '#fff',
                          backgroundColor: {
                            image: pic0
                          },
                          width: 30,
                          height: 30,
                          align: 'center',
                          borderRadius: 24,
                          fontSize: 12,
                      },
                      b: {
                          color: '#fff',
                          backgroundColor: {
                            image: pic1
                          },
                          width: 30,
                          height: 30,
                          align: 'center',
                          borderRadius: 24,
                          fontSize: 12,
                      },
                      c: {
                          color: '#fff',
                          backgroundColor: {
                            image: pic2
                          },
                          width: 30,
                          height: 30,
                          align: 'center',
                          borderRadius: 24,
                          fontSize: 12,
                      },
                      d: {
                          color: '#00FFF4',
                          borderColor: '#0292AC',
                          borderWidth: 2,
                          width: 30,
                          height: 30,
                          align: 'center',
                          borderRadius: 24,
                          fontSize: 12,
                      }
                  },
                  formatter: function(params) {
                      var index = XData.map(item => item).indexOf(params);
                      index = index + 1;
                      if(index == 1){
                      return [
                          '{a|' + index + '}' + '  ' + params
                      ].join('\n')
                      }else if(index == 2){
                      return [
                          '{b|' + index + '}' + '  ' + params
                      ].join('\n')
                      }else if(index == 3){
                      return [
                          '{c|' + index + '}' + '  ' + params
                      ].join('\n')
                      }else{
                      return [
                          '{d|' + index + '}' + '  ' + params
                      ].join('\n')
                      }
                  }
                },
                // 纵坐标数据
                data: XData,
                yAxisIndex: 0,
                // 横坐标 分割线等取消显示
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false
                }
              },
              {
                type: "category",
                inverse: true,
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  // show: false,
                  // margin: 50,
                  fontSize: 12,
                  align: 'right',
                  padding: [0,-40,0,0],
                  interval: 0,
                  rich: {
                      a1: {
                          color: '#fff',
                          fontSize: 12,
                      }
                  },
                  formatter: function (value, index) {
                    return `{a1|${value}}`
                },
                },
                // 统计的总量 用纵坐标模拟
                data: valueData
              }
            ],
            series: [
              {
                type: "bar",
                // 宽度
                barWidth: "17",
                data: valueData,
                itemStyle: {
                  normal: {
                    show: true,
                    textStyle: {
                      fontSize: 16
                    },
                    barBorderRadius: [0, 20, 20, 0],
                    color: new this.echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        {
                          offset: 0,
                          color: "#0F87FA"
                        },
                        {
                          offset: 1,
                          color: "#00C0FE"
                        }
                      ],
                      false
                    )
                  }
                }
              },
              {  // 灰色背景柱状图
                  type: 'bar',
                  barGap: '-100%',
                  barWidth: 17,
                  itemStyle: {
                      normal: {
                          color: 'rgba(255, 255, 255, 0.1)',
                          barBorderRadius: [0, 20, 20, 0],
                      }
                  },
                  data:maxValueList
              }
            ]
          };
        // 绘制图表
        this.topChart.setOption(option);
    },
    sixMonthChartLoad(){
        // 基于准备好的dom，初始化echarts实例
        let XData = ["2月","3月","4月","5月","6月","7月"]
        let valueData = [300,620,738,1000,890,710]
        let maxValueList=[]
        valueData.forEach((a)=>{maxValueList.push(valueData[3])})
        let option = {
          tooltip: {
            show:false
          },
          grid: {
            left: "15%", //距离dom间距
            right: "5%",
            top: "10%",
            bottom: "20%"
          },
          xAxis: [
            {
              type: "category",
              axisLabel: {
                fontSize: 12,
                align: 'center',
                color: '#fff'
              },
              offset:10,
              // 横坐标 分割线等取消显示
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              // 纵坐标数据
              data: XData,
            },
            {
              type: "category",
              axisLabel: {
                fontSize: 15,
                align: 'center',
                color: '#fff'
              },
              position:'bottom',
              offset:30,
              // 横坐标 分割线等取消显示
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              data: valueData,
            }
          ],
          yAxis: [
            {
              type: "value",
              // 横坐标 分割线等取消显示
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                    interval: 0,
                    fontSize:12,
                    color: '#587396'
                },
              // 纵坐标数据
              data: XData,
            }
          ],
          series: [
            {
              type: "bar",
              // 宽度
              barWidth: "20",
              data: valueData,
              itemStyle: {
                normal: {
                  show: true,
                  textStyle: {
                    fontSize: 12
                  },
                  barBorderRadius: [20, 20, 20, 20],
                  color: new this.echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: "#00CCD2"
                      },
                      {
                        offset: 1,
                        color: "#00A2FF"
                      }
                    ],
                    false
                  )
                }
              }
            },
            {  // 灰色背景柱状图
                type: 'bar',
                barGap: '-100%',
                barWidth: 20,
                itemStyle: {
                    normal: {
                        color: 'rgba(255, 255, 255, 0.1)',
                        barBorderRadius: [20, 20, 20, 20],
                    }
                },
                data:maxValueList
            }
          ]
        };
        // 绘制图表
        this.sixMonthChart.setOption(option);
    },
    thirtyChartLoad(){
        // 基于准备好的dom，初始化echarts实例
        let angle = 0; //角度，用来做简单的动画效果的
        let value = 80;
        var timerId;
        let option = {
          title: {
              text: '{a|' + 35580 + '}{b|}\n{c|借阅总量}',
              x: 'center',
              y: 'center',
              textStyle: {
                  rich: {
                      a: {
                          fontSize: 38,
                          color: '#fff',
                          fontWeight: '600',
                      },
                      b: {
                          fontSize: 20,
                          color: '#fff',
                          padding: [0, 0, 14, 0],
                      },
                      c: {
                          fontSize: 16,
                          color: '#fff',
                          padding: [5, 0],
                      },
                  },
              },
          },
          series: [
              {
                  type: 'pie',
                  zlevel: 1,
                  silent: true,
                  radius: ['100%', '99%'],
                  hoverAnimation: false,
                  color: '#1E75A0',
                  // animation:false,    //charts3 no
                  label: {
                      normal: {
                          show: false,
                      },
                  },
                  labelLine: {
                      normal: {
                          show: false,
                      },
                  },
                  data: [0],
              },
              {
                  type: 'pie',
                  zlevel: 2,
                  silent: true,
                  radius: ['92%', '99.2%'],
                  startAngle: 50,
                  hoverAnimation: false,
                  // animation:false,    //charts3 no
                  label: {
                      normal: {
                          show: false,
                      },
                  },
                  labelLine: {
                      normal: {
                          show: false,
                      },
                  },
                  data: _pie2(),
              },
              {
                  type: 'gauge',
                  zlevel: 3,
                  splitNumber: 50, //刻度数量
                  min: 0,
                  max: 100,
                  radius: '92%', //图表尺寸
                  center: ['50%', '50%'],
                  startAngle: 90,
                  endAngle: -269.9999,
                  axisLine: {
                      show: false,
                      lineStyle: {
                          width: 0,
                          shadowBlur: 0,
                          color: [[1, '#0dc2fe']],
                      },
                  },
                  axisTick: {
                      show: false,
                      lineStyle: {
                          color: 'auto',
                          width: 2,
                      },
                      length: 20,
                      splitNumber: 5,
                  },
                  splitLine: {
                      show: true,
                      length: 16,
                      lineStyle: {
                          color: '#000',
                      },
                  },
                  axisLabel: {
                      show: false,
                  },
                  pointer: {
                      //仪表盘指针
                      show: 0,
                  },
                  detail: {
                      show: 0,
                  },
              },
              //环形
              {
                  name: '基础饼图',
                  type: 'pie',
                  zlevel: 4,
                  radius: ['82%', '91%'],
                  hoverAnimation: false,
                  label: {
                      normal: {
                          show: false,
                      },
                      emphasis: {
                          show: false,
                      },
                  },
                  zlevel: 1,
                  labelLine: {
                      normal: {
                          show: false,
                      },
                  },
                  data: [
                      {
                          value: 100,
                          name: '未执行',
                          itemStyle: {
                              normal: {
                                  color: {
                                      x: 0,
                                      y: 0,
                                      x2: 0,
                                      y2: 1,
                                      colorStops: [
                                          {
                                              offset: 0,
                                              color: '#5EEDF5', // 0% 处的颜色
                                          },
                                          {
                                              offset: 0.25,
                                              color: '#265193', // 0% 处的颜色
                                          },
                                          {
                                              offset: 0.5,
                                              color: '#5EEDF5', // 0% 处的颜色
                                          },
                                          {
                                              offset: 0.75,
                                              color: '#265193', // 0% 处的颜色
                                          },
                                          {
                                              offset: 1,
                                              color: '#5EEDF5', // 100% 处的颜色
                                          },
                                      ],
                                      globalCoord: false, // 缺省为 false
                                  },
                              },
                          },
                      },
                  ],
              },
              // 紫色
              {
                  name: 'ring5',
                  type: 'custom',
                  coordinateSystem: 'none',
                  renderItem: function (params, api) {
                      return {
                          type: 'arc',
                          shape: {
                              cx: api.getWidth() / 2,
                              cy: api.getHeight() / 2,
                              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
                              startAngle: ((0 + angle) * Math.PI) / 180,
                              endAngle: ((90 + angle) * Math.PI) / 180,
                          },
                          style: {
                              stroke: {
                                      colorStops: [
                                          {
                                              offset: 0,
                                              color: '#EFAE02', // 0% 处的颜色
                                          },
                                          {
                                              offset: 1,
                                              color: '#22B2D8', // 100% 处的颜色
                                          },
                                      ],
                                      globalCoord: false, // 缺省为 false
                                  },
                              fill: 'transparent',
                              lineWidth: 1.5,
                          },
                          silent: true,
                      };
                  },
                  data: [0],
              },
              {
                  name: 'ring5', //紫点
                  type: 'custom',
                  coordinateSystem: 'none',
                  renderItem: function (params, api) {
                      let x0 = api.getWidth() / 2;
                      let y0 = api.getHeight() / 2;
                      let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
                      let point = getCirlPoint(x0, y0, r, 90 + angle);
                      return {
                          type: 'circle',
                          shape: {
                              cx: point.x,
                              cy: point.y,
                              r: 4,
                          },
                          style: {
                              stroke: '#EACA63', //绿
                              fill: '#EACA63',
                          },
                          silent: true,
                      };
                  },
                  data: [0],
              },
              // 蓝色
              {
                  name: 'ring5',
                  type: 'custom',
                  coordinateSystem: 'none',
                  renderItem: function (params, api) {
                      return {
                          type: 'arc',
                          shape: {
                              cx: api.getWidth() / 2,
                              cy: api.getHeight() / 2,
                              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
                              startAngle: ((180 + angle) * Math.PI) / 180,
                              endAngle: ((270 + angle) * Math.PI) / 180,
                          },
                          style: {
                              stroke: {
                                      colorStops: [
                                          {
                                              offset: 0,
                                              color: '#1E9DCD', // 0% 处的颜色
                                          },
                                          {
                                              offset: 1,
                                              color: '#5F35FB', // 100% 处的颜色
                                          },
                                      ],
                                      globalCoord: false, // 缺省为 false
                                  },
                              fill: 'transparent',
                              lineWidth: 1.5,
                          },
                          silent: true,
                      };
                  },
                  data: [0],
              },
              {
                  name: 'ring5', // 蓝色
                  type: 'custom',
                  coordinateSystem: 'none',
                  renderItem: function (params, api) {
                      let x0 = api.getWidth() / 2;
                      let y0 = api.getHeight() / 2;
                      let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
                      let point = getCirlPoint(x0, y0, r, 180 + angle);
                      return {
                          type: 'circle',
                          shape: {
                              cx: point.x,
                              cy: point.y,
                              r: 4,
                          },
                          style: {
                              stroke: '#2795DE', //绿
                              fill: '#2795DE',
                          },
                          silent: true,
                      };
                  },
                  data: [0],
              },

              {
                  name: 'ring5',
                  type: 'custom',
                  coordinateSystem: 'none',
                  renderItem: function (params, api) {
                      return {
                          type: 'arc',
                          shape: {
                              cx: api.getWidth() / 2,
                              cy: api.getHeight() / 2,
                              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                              startAngle: ((270 + -angle) * Math.PI) / 180,
                              endAngle: ((40 + -angle) * Math.PI) / 180,
                          },
                          style: {
                              stroke: '#4AD8DB',
                              fill: 'transparent',
                              lineWidth: 1.5,
                          },
                          silent: true,
                      };
                  },
                  data: [0],
              },
              // 橘色

              {
                  name: 'ring5',
                  type: 'custom',
                  coordinateSystem: 'none',
                  renderItem: function (params, api) {
                      return {
                          type: 'arc',
                          shape: {
                              cx: api.getWidth() / 2,
                              cy: api.getHeight() / 2,
                              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                              startAngle: ((90 + -angle) * Math.PI) / 180,
                              endAngle: ((220 + -angle) * Math.PI) / 180,
                          },
                          style: {
                              stroke: '#4AD8DB',
                              fill: 'transparent',
                              lineWidth: 1.5,
                          },
                          silent: true,
                      };
                  },
                  data: [0],
              },
              {
                  name: 'ring5',
                  type: 'custom',
                  coordinateSystem: 'none',
                  renderItem: function (params, api) {
                      let x0 = api.getWidth() / 2;
                      let y0 = api.getHeight() / 2;
                      let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
                      let point = getCirlPoint(x0, y0, r, 90 + -angle);
                      return {
                          type: 'circle',
                          shape: {
                              cx: point.x,
                              cy: point.y,
                              r: 4,
                          },
                          style: {
                              stroke: '#4AD8DB',
                              fill: '#4AD8DB',
                          },
                          silent: true,
                      };
                  },
                  data: [0],
              },
              {
                  name: 'ring5', //绿点
                  type: 'custom',
                  coordinateSystem: 'none',
                  renderItem: function (params, api) {
                      let x0 = api.getWidth() / 2;
                      let y0 = api.getHeight() / 2;
                      let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
                      let point = getCirlPoint(x0, y0, r, 270 + -angle);
                      return {
                          type: 'circle',
                          shape: {
                              cx: point.x,
                              cy: point.y,
                              r: 4,
                          },
                          style: {
                              stroke: '#4AD8DB', //绿
                              fill: '#4AD8DB',
                          },
                          silent: true,
                      };
                  },
                  data: [0],
              },
          ],
        };
        // 绘制图表
        this.thirtyChart.setOption(option);
        function _pie1() {
            let dataArr = [];
            for (var i = 0; i < 8; i++) {
                dataArr.push({
                    name: (i + 1).toString(),
                    value: 20,
                    itemStyle: {
                        normal: {
                            color: 'rgba(88,142,197,0.4)',
                            borderWidth: 0,
                            borderColor: 'rgba(0,0,0,0)',
                        },
                    },
                });
            }
            return dataArr;
        }

        function _pie2() {
            let dataArr = [];
            for (var i = 0; i < 6; i++) {
                if (i % 2 === 0) {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 25,
                        itemStyle: {
                            normal: {
                                color: '#1E75A0',
                                borderWidth: 0,
                                borderColor: 'rgba(0,0,0,0)',
                            },
                        },
                    });
                } else {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 20,
                        itemStyle: {
                            normal: {
                                color: 'rgba(0,0,0,0)',
                                borderWidth: 0,
                                borderColor: 'rgba(0,0,0,0)',
                            },
                        },
                    });
                }
            }
            return dataArr;
        }
        //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
        function getCirlPoint(x0, y0, r, angle) {
            let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
            let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
            return {
                x: x1,
                y: y1,
            };
        }
        let that=this
        function draw() {
            angle = angle + 3;
            that.thirtyChart.setOption(option, true);
            //window.requestAnimationFrame(draw);
        }
        if (timerId) {
            clearInterval(timerId);
        }
        timerId = setInterval(function () {
            //用setInterval做动画感觉有问题
            draw();
        }, 100);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.big-screen{
  width: 100%;
  height: 100%;
  background: url('../assets/bg.png') center center no-repeat;
  overflow: hidden;
}
.big-screen .head{
  width: 100%;
  height: 5.6rem;
  background: url('../assets/top-center.png') 0.3rem center no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-content: center;
  justify-content: space-between;
  text-align: center;
  letter-spacing: 0.5rem;
}
.big-screen .head div.left,.big-screen .head div.right{
  width: 35.3rem;
  height: 3.4rem;
  background: url('../assets/top-left.png') center center no-repeat;
  background-size: contain;
  margin-top: 1.7rem;
  margin-right: 0.1rem;
}
.big-screen .head div.left{
  transform: rotateY(180deg);
  margin-left: 0.1rem;
  /* background: url('../assets/top-right.png') center center no-repeat;
  background-size: contain; */
}
.big-screen .head div.mid{
  width: 49rem;
  font-family: Helvetica;
  font-size: 2.4rem;
  color: #fff;
  margin-top: 1rem;
}
.big-screen .main{
  width: 100%;
  height: 57.5rem;
  /* background: #05A998; */
  display: flex;
  align-content: center;
  justify-content: center;
  padding: 2.2rem 0 ;
}
.big-screen .main .title{
  font-size: 1.25rem;
  padding-top: 0.9rem;
  color: #00FFF4;
  letter-spacing: 0.05rem;
}
.big-screen .main>div{
  height: 100%;
}
.big-screen .main>div .common-line{
  display: block;
  margin: 0 auto;
}
.big-screen .main>div.left{
  width: 27.5rem;
  /* background: #292B6A; */
}
.big-screen .main>div.left .bottom{
  padding: 0 1.375rem;
  box-sizing: border-box;
  /* background: burlywood; */
}
.big-screen .main>div.left .bottom .today-book-top{
  width: 100%;
  height: 5.2rem;
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin: 1.375rem 0 0.625rem;
}
.big-screen .main>div.left .bottom .today-book-top li{
  width: 7.8rem;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-flow: column;
  background: url('../assets/border3.png') center center no-repeat;
  background-size: contain;
  color: #fff;
  font-size: 0.75rem;
  position: relative;
}
.big-screen .main>div.left .bottom .today-book-top li .number1{
  font-size: 1.125rem;
  color: #66FFFF;
  line-height: 1.625rem;
  margin-top: -0.3rem;
}
.big-screen .main>div.left .bottom .today-book-top .circle{
  width: 1rem;
  height: 1rem;
  background: #66FFFF;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -0.5rem;
  border-radius: 100%;
  animation:twinkling 2s infinite ease-in-out;
}
@keyframes twinkling {
	0% {
	opacity:0.2;
  transform: scale(0.2);
	filter:alpha(opacity=20);
	-webkit-transform:scale(1);
}
50% {
	opacity:0.5;
  transform: scale(1);
	filter:alpha(opacity=50);
	-webkit-transform:scale(1.12);
}
100% {
	opacity:0.2;
  transform: scale(0.2);
	filter:alpha(opacity=20);
	-webkit-transform:scale(1);
}
}
.big-screen .main>div.left .bottom .common-statistics{
  padding: 0;
  height: 6rem;
  margin-bottom: 0.875rem;
}
.big-screen .main>div.left .bottom .common-statistics li{
  width: 6rem;
  height: 6rem;
  font-size: 0.75rem;
  background: url('../assets/border2.png') center center no-repeat;
  background-size: 100% 95%;
}
.big-screen .main>div.left .bottom .common-statistics li .number1{
  font-size: 1.5rem;
  margin: 0;
}
.big-screen .main>div.left .bottom .title-small{
  font-size: 0.94rem;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1rem;
}
.big-screen .main>div.mid{
  width: 56.25rem;
  /* background: #292B6A; */
  margin: 0 1.9rem;
}
.big-screen .main>div.mid .top .real-time{
  width: 100%;
  height: 5.5rem;
  display: flex;
  justify-content: center;
  align-content: center;
  margin-bottom: 1.125rem;
}
.big-screen .main>div.mid .top .real-time .clock{
  width: 5.5rem;
  height: 5.5rem;
  background: url('../assets/clock.png') center center no-repeat;
  background-size: contain;
}
.big-screen .main>div.mid .top .real-time .people ul{
  width: 31.5rem;
  height: 5.5rem;
  margin: 0 2.5rem;
  padding-top: 0.625rem;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.big-screen .main>div.mid .top .real-time .people ul li{
  width: 4rem;
  height: 4rem;
  background: url('../assets/border1.png') center center no-repeat;
  font-size: 3.125rem;
  color: #66FFFF;
}
.big-screen .main>div .common-statistics{
  width: 100%;
  height: 8.7rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding: 0 2.2rem;
}
.big-screen .main>div .common-statistics li{
  width: 11.25rem;
  height: 100%;
  background: url('../assets/border2.png') center center no-repeat;
  background-size: contain;
  color: #fff;
  font-size: 0.875rem;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-flow: column;
}
.big-screen .main>div .common-statistics li .number1{
  color: #66FFFF;
  font-size: 1.625rem;
  margin-bottom: 0.625rem;
}
.big-screen .main>div .common-statistics li.number2{
  color: #00FFF4;
  font-size: 1.25rem;
  width: 17.875rem;
  background: url('../assets/border4.png') center center no-repeat;
  background-size: 100% 100%;
}
.big-screen .main>div .common-statistics li.number2 span{
  color: #00FFF4;
  font-size: 2.8rem;
}
.big-screen .main>div.mid .top .line{
  width: 47.5rem;
  height: 0.7rem;
  background: #1273DB;
  border-radius: 0.5rem;
  margin: 0 auto;
}
.big-screen .main>div.mid .bottom .ring-wrap{
  width: 100%;
  height: 18.75rem;
  margin-top: 1.875rem;
  display: flex;
  justify-content: center;
  align-content: center;
  box-sizing: border-box;
}
.big-screen .main>div.mid .bottom .ring-wrap div{
  flex: 1;
}
.big-screen .main>div.mid .bottom .ring-wrap .ring-list ul{
  width: 100%;
  height: 100%;
  padding-right: 6.2rem;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-flow: column;
  text-align: right;
  background: url('../assets/list-left.png') right center no-repeat;
}
.big-screen .main>div.mid .bottom .ring-wrap .ring-right ul{
  background: url('../assets/list-right.png') left center no-repeat;
  text-align: left;
  padding-right: 0;
  padding-left: 6.2rem;
}
.big-screen .main>div.mid .bottom .ring-wrap .ring-list ul li{
  height: 2.5rem;
  line-height: 2.5rem;
  color: #fff;
  font-size: 0.875rem;
}
.big-screen .main>div.mid .bottom .ring-wrap .ring-list ul li span{
  color: #66FFFF;
  font-size: 1rem;
  padding-right: 1rem;
}
.big-screen .main>div.mid .bottom .ring-wrap .ring-right ul li span{
  padding-left: 1rem;
}
.big-screen .main>div.right{
  width: 27.5rem;
  /* background: #292B6A; */
}
.big-screen .main>div .top{
  width: 100%;
  height: 31rem;
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 1.9rem;
}
.big-screen .main>div .bottom{
  width: 100%;
  height: 24.4rem;
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.1);
}
</style>
